<template>
	<view class="container">
		<!-- 自定义导航栏 - 添加磨砂玻璃效果 -->
		<view class="nav-bar animate__animated animate__fadeInDown">
			<text class="nav-btn" @click="goBack">←</text>
			<text class="nav-title">添加课程</text>
			<text class="nav-btn save" @click="saveCourse">保存</text>
		</view>
		<!-- 表单区域：添加卡片效果和微交互 -->
		<view class="form-card animate__animated animate__fadeInUp">
			<!-- 课程名称行 -->
			<view class="form-item" @touchstart="touchStart($event, 'title')" @touchend="touchEnd">
				<image src="/static/icon_resources/course_icon.png" mode="widthFix" class="form-icon"></image>
				<text class="label">课程名称：</text>
				<input v-model="course.title" class="input" placeholder="请输入课程名称"
					:class="{'input-focus': activeField === 'title'}" />
			</view>
			<!-- 颜色选择行 -->
			<view class="form-item" @touchstart="touchStart($event, 'color')" @touchend="touchEnd">
				<image src="/static/icon_resources/color_icon.png" mode="widthFix" class="form-icon"></image>
				<text class="label">颜色：</text>
				<picker :range="colorOptions" @change="onColorChange">
					<view class="picker color-preview" :style="{ 
                  backgroundColor: colorValues[course.colorIndex] + '20',
                  borderColor: colorValues[course.colorIndex],
                  color: colorValues[course.colorIndex]
                }">
						{{ colorOptions[course.colorIndex] || '请选择颜色' }}
						<view class="color-dot" :style="{ backgroundColor: colorValues[course.colorIndex] }"></view>
					</view>
				</picker>
			</view>
			<!-- 授课老师行 -->
			<view class="form-item" @touchstart="touchStart($event, 'teacher')" @touchend="touchEnd">
				<image src="/static/icon_resources/teacher_icon.png" mode="widthFix" class="form-icon"></image>
				<text class="label">授课老师：</text>
				<input v-model="course.teacher" class="input" placeholder="请输入授课老师"
					:class="{'input-focus': activeField === 'teacher'}" />
			</view>
			<!-- 上课地点行 -->
			<view class="form-item" @touchstart="touchStart($event, 'location')" @touchend="touchEnd">
				<image src="/static/icon_resources/location_icon.png" mode="widthFix" class="form-icon"></image>
				<text class="label">上课地点：</text>
				<input v-model="course.location" class="input" placeholder="请输入上课地点"
					:class="{'input-focus': activeField === 'location'}" />
			</view>
			<view class="form-item" @touchstart="touchStart($event, 'elective')" @touchend="touchEnd">
				<image src="/static/icon_resources/type_icon.png" mode="widthFix" class="form-icon"></image>
				<text class="label">课程性质：</text>
				<picker :range="courseTypeOptions" @change="onCourseTypeChange">
					<view class="picker" :class="{
	              'picker-active': course.elective !== null,
	              'course-type-picker': true,
	              'required': !course.elective,
	              'elective': course.elective
	            }">
						{{ course.elective !== null ? courseTypeOptions[course.elective ? 1 : 0] : '请选择课程性质' }}
					</view>
				</picker>
			</view>

		</view>

		<!-- 上课时间段区域 - 添加卡片效果和动画 -->
		<view class="time-card animate__animated animate__fadeInUp">
			<view class="section-header">
				<text class="section-title">上课时间段</text>
				<text class="add-btn" @click="addTimeSection" @touchstart="btnTouchStart" @touchend="btnTouchEnd">

					添加时间段
				</text>
			</view>

			<view class="time-list">
				<view class="time-item" v-for="(time, index) in course.timeSections" :key="index"
					:class="{'time-item-active': activeTimeIndex === index}" @touchstart="touchTimeItem(index)"
					@touchend="activeTimeIndex = null">
					<!-- 周数选择行 -->
					<view class="time-row">
						<image src="/static/icon_resources/week_icon.png" mode="widthFix" class="time-icon"></image>
						<picker :range="weekOptions" @change="(e) => onStartWeekChange(e, index)">
							<view class="picker week-picker" :class="{'picker-active': time.startWeekIndex !== null}">
								第{{ weekOptions[time.startWeekIndex] || '1' }}周
							</view>
						</picker>
						<text class="separator">-</text>
						<picker :range="weekOptions" @change="(e) => onEndWeekChange(e, index)">
							<view class="picker week-picker" :class="{'picker-active': time.endWeekIndex !== null}">
								第{{ weekOptions[time.endWeekIndex] || '1' }}周
							</view>
						</picker>
						<text class="delete-btn" @click="removeTimeSection(index)" @touchstart="btnTouchStart"
							@touchend="btnTouchEnd">×</text>
					</view>

					<!-- 星期 + 节次选择行 -->
					<view class="time-row">
						<image src="/static/icon_resources/day_icon.png" mode="widthFix" class="time-icon"></image>
						<picker :range="dayOptions" @change="(e) => onDayChange(e, index)">
							<view class="picker day-picker" :class="{'picker-active': time.dayIndex !== null}">
								{{ dayOptions[time.dayIndex] || '星期一' }}
							</view>
						</picker>
						<picker :range="sectionOptions" @change="(e) => onStartSectionChange(e, index)">
							<view class="picker section-picker"
								:class="{'picker-active': time.startSectionIndex !== null}">
								第{{ sectionOptions[time.startSectionIndex] || '1' }}节
							</view>
						</picker>
						<text class="separator">-</text>
						<picker :range="sectionOptions" @change="(e) => onEndSectionChange(e, index)">
							<view class="picker section-picker"
								:class="{'picker-active': time.endSectionIndex !== null}">
								第{{ sectionOptions[time.endSectionIndex] || '1' }}节
							</view>
						</picker>

					</view>

					<!-- 预览显示区域 -->
					<view class="preview-row" :style="{ backgroundColor: colorValues[course.colorIndex] + '10' }">
						<text class="preview-text">
							{{ weekOptions[time.startWeekIndex] ? '第' + weekOptions[time.startWeekIndex] : '第1' }}
							-
							{{ weekOptions[time.endWeekIndex] ? weekOptions[time.endWeekIndex] + '周' : '1周' }}
							{{ dayOptions[time.dayIndex] ? dayOptions[time.dayIndex] : '' }}
							{{ sectionOptions[time.startSectionIndex] ? '第' + sectionOptions[time.startSectionIndex] : '第1' }}
							-
							{{ sectionOptions[time.endSectionIndex] ? sectionOptions[time.endSectionIndex] + '节' : '1节' }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="save-btn" @click="saveCourse" @touchstart="btnTouchStart" @touchend="btnTouchEnd">
			保存课程
		</view>

		<!-- 保存按钮浮动在底部 -->

		<!-- 新增的提醒设置弹窗 -->
		<uni-popup ref="reminderPopup" type="center" :is-mask-click="true">
			<view class="reminder-modal">
				<!-- 弹窗头部 -->
				<view class="modal-header">
					<text class="modal-title">设置课程提醒</text>
					<text class="close-btn" @click="closeReminderModal">×</text>
				</view>

				<!-- 提醒类型（这里简化为“是否提醒”+“提前时间”，更贴合需求） -->
				<view class="form-group">
					<text class="form-label">是否提醒</text>
					<picker class="form-input" mode="selector" :range="reminderSwitch" @change="onReminderSwitch">
						<view>{{ currentReminder.isRemind ? '开启提醒' : '关闭提醒' }}</view>
					</picker>
				</view>

				<!-- 提前时间（仅在开启提醒时显示） -->
				<view class="form-group" v-if="currentReminder.isRemind">
					<text class="form-label">提前时间</text>
					<picker class="form-input" mode="selector" :range="advanceTimes" @change="onAdvanceTimeChange">
						<view>{{ currentReminder.advanceTime || '选择提前时间' }}</view>
					</picker>
				</view>

				<!-- 提醒内容（自动填充，支持修改） -->
				<view class="form-group">
					<text class="form-label">提醒内容</text>
					<input class="form-input" v-model="currentReminder.content" placeholder="自动填充课程信息，可修改" />
				</view>

				<!-- 操作按钮 -->
				<view class="action-buttons">
					<button class="cancel-btn" @click="closeReminderModal">取消</button>
					<button class="confirm-btn" @click="saveReminder">保存提醒</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { applyTheme, getCurrentTheme } from '@/utils/theme.js'; // 注意替换实际的 theme.js 路径
	export default {
		data() {
			return {

				colorOptions: ['红色', '橙色', '黄色', '绿色', '蓝色', '紫色', '青色', '灰色', '棕色', '粉色'],
				colorValues: ['#db806b', '#e9af63', '#f1d17a', '#a2b770', '#7a9db3', '#8a8ab1', '#b6dddc', '#9aa4a3',
					'#ae8c6a', '#f2ccd5'
				],
				dayOptions: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				weekOptions: Array.from({
					length: 20
				}, (_, i) => i + 1),
				sectionOptions: Array.from({
					length: 11
				}, (_, i) => i + 1),
				courseTypeOptions: ['必修', '选修'],
				course: {
					title: '',
					colorIndex: 0,
					teacher: '',
					location: '',
					timeSections: [{
						startWeekIndex: null,
						endWeekIndex: null,
						dayIndex: null,
						startSectionIndex: null,
						endSectionIndex: null
					}]
				},
				activeField: null,
				activeTimeIndex: null,
				btnScale: 1,
				elective: null,
				// 新增的提醒相关数据
				reminderSwitch: ['关闭提醒', '开启提醒'], // 简化为开关
				advanceTimes: ['5分钟', '10分钟', '15分钟', '30分钟', '60分钟'],
				currentReminder: {
					isRemind: false, // 是否开启提醒
					advanceTime: '15分钟', // 提前时间
					content: '', // 提醒内容
					timer: null // 定时器ID（用于清除）
				},
				reminderTypeIndex: 0,
				advanceTimeIndex: 2, // 默认选择30分钟前
				repeatIndex: 0
			};
		},
		onMounted() {
		    // 初始化主题
		    this.initTheme();
		    // 监听主题变化事件
		    uni.$on('themeChange', (newVars) => {
		      this.applyThemeVars(newVars);
		    });
		  },
		  onUnmounted() {
		    // 移除事件监听，避免内存泄漏
		    uni.$off('themeChange');
		  },

		onLoad() {
			// 初始化默认提醒内容（课程名+老师+地点，根据实际数据替换）
			this.currentReminder.content = this.getDefaultReminderContent()
		},

		methods: {
			initTheme() {
			      const savedTheme = getCurrentTheme();
			      const initialTheme = themeOptions.find(t => t.value === savedTheme) || themeOptions[0];
			      if (initialTheme) {
			        this.applyThemeVars(initialTheme.vars);
			      }
			    },
			    applyThemeVars(vars) {
			      const doc = document.documentElement;
			      Object.entries(vars).forEach(([key, value]) => {
			        doc.style.setProperty(key, value);
			      });
			    },

			goBack() {
				uni.switchTab({
					url: '/pages/index/table' // 替换为实际的 table 页面路径
				});
			},
			onColorChange(e) {
				this.course.colorIndex = parseInt(e.detail.value);
			},
			onDayChange(e, index) {
				this.course.timeSections[index].dayIndex = parseInt(e.detail.value);
			},
			onStartWeekChange(e, index) {
				this.course.timeSections[index].startWeekIndex = parseInt(e.detail.value);
			},
			onEndWeekChange(e, index) {
				this.course.timeSections[index].endWeekIndex = parseInt(e.detail.value);
			},
			onStartSectionChange(e, index) {
				this.course.timeSections[index].startSectionIndex = parseInt(e.detail.value);
			},
			onEndSectionChange(e, index) {
				this.course.timeSections[index].endSectionIndex = parseInt(e.detail.value);
			},
			onCourseTypeChange(e) {
				this.course.elective = parseInt(e.detail.value) === 1;
			},
			addTimeSection() {
				this.course.timeSections.push({
					startWeekIndex: null,
					endWeekIndex: null,
					dayIndex: null,
					startSectionIndex: null,
					endSectionIndex: null
				});
				// 滚动到最新添加的项目
				setTimeout(() => {
					uni.pageScrollTo({
						selector: '.time-item:last-child',
						duration: 300
					});
				}, 100);
			},
			removeTimeSection(index) {
				if (this.course.timeSections.length > 1) {
					uni.showModal({
						title: '提示',
						content: '确定要删除这个时间段吗？',
						success: (res) => {
							if (res.confirm) {
								this.course.timeSections.splice(index, 1);
							}
						}
					});
				} else {
					uni.showToast({
						title: '至少保留一个时间段',
						icon: 'none'
					});
				}
			},
			saveCourse() {
				if (this.course.elective === null) {
					uni.showToast({
						title: '请选择课程性质',
						icon: 'none'
					});
					return;
				}
				if (!this.course.title.trim()) {
					uni.showToast({
						title: '请输入课程名称',
						icon: 'none'
					});
					return;
				}

				const isValid = this.course.timeSections.every(time => {
					if (time.startWeekIndex === null || time.endWeekIndex === null) {
						uni.showToast({
							title: '请选择完整周数',
							icon: 'none'
						});
						return false;
					}
					if (time.dayIndex === null) {
						uni.showToast({
							title: '请选择星期',
							icon: 'none'
						});
						return false;
					}
					if (time.startSectionIndex === null || time.endSectionIndex === null) {
						uni.showToast({
							title: '请选择完整节次',
							icon: 'none'
						});
						return false;
					}
					if (time.startWeekIndex > time.endWeekIndex) {
						uni.showToast({
							title: '起始周不能大于结束周',
							icon: 'none'
						});
						return false;
					}
					if (time.startSectionIndex > time.endSectionIndex) {
						uni.showToast({
							title: '起始节不能大于结束节',
							icon: 'none'
						});
						return false;
					}
					return true;
				});

				if (!isValid) return;

				// 处理时间槽数据 - 根据API文档要求生成weekList字符串
				let timeSlots = [];
				this.course.timeSections.forEach(time => {
					// 生成连续的周次列表，如"1,2,3,4,5"
					const weekList = Array.from({
							length: time.endWeekIndex - time.startWeekIndex + 1
						},
						(_, i) => time.startWeekIndex + i + 1
					).join(',');

					// 为每节课生成一个timeSlot
					for (let period = time.startSectionIndex + 1; period <= time.endSectionIndex + 1; period++) {
						timeSlots.push({
							weekList, // 格式如 "1,2,3,4,5"
							dayOfweek: time.dayIndex + 1, // 转换为1-7 (周一为1)
							period // 转换为1-12
						});
					}
				});

				// 从本地存储中获取 userID
				const userID = uni.getStorageSync('userID');

				// 构造符合API文档要求的请求体
				const requestData = {
					userId: userID, // 使用从本地存储获取的 userID
					course_name: this.course.title,
					teacher: this.course.teacher,
					location: this.course.location,
					elective: this.course.elective,
					color: this.course.colorIndex,
					timeSlots
				};

				// 发送请求到后端API
				uni.request({
					url: globalThis.BASE_API + "/course/add",
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: requestData,
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '课程添加成功',
								icon: 'success',
								duration: 1500
							});
							// 1.5秒后返回上一页
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							uni.showToast({
								title: res.data.message || '添加课程失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败，请检查网络',
							icon: 'none'
						});
						console.error('添加课程失败:', err);
					}
				});
			},
			touchStart(e, field) {
				this.activeField = field;
			},
			touchEnd() {
				this.activeField = null;
			},
			touchTimeItem(index) {
				this.activeTimeIndex = index;
			},
			btnTouchStart() {
				this.btnScale = 0.95;
			},
			btnTouchEnd() {
				this.btnScale = 1;
			},
			// 新增的提醒相关方法
			showReminderModal() {
				// 每次打开弹窗前，重新初始化提醒内容（确保内容与当前课程信息一致）
				this.currentReminder.content = this.getDefaultReminderContent();

				// 调用uni-popup的open方法打开弹窗
				if (this.$refs.reminderPopup) {
					this.$refs.reminderPopup.open();
				} else {
					// 调试用：若弹窗引用不存在，打印错误信息
					console.error('未找到reminderPopup组件，请检查ref是否正确');
				}
			},
			// 关闭弹窗
			closeReminderModal() {
				this.$refs.reminderPopup.close()
				// 清除可能存在的定时器
				if (this.currentReminder.timer) {
					clearTimeout(this.currentReminder.timer)
				}
			},

			// 切换“是否提醒”
			onReminderSwitch(e) {
				const isRemind = e.detail.value === 1
				this.currentReminder.isRemind = isRemind
				// 重置默认提前时间
				if (isRemind) {
					this.currentReminder.advanceTime = this.advanceTimes[2] // 默认15分钟
				}
			},

			// 选择提前时间
			onAdvanceTimeChange(e) {
				this.currentReminder.advanceTime = this.advanceTimes[e.detail.value]
			},

			// 保存提醒（核心逻辑）
			saveReminder() {
				if (!this.currentReminder.isRemind) {
					this.closeReminderModal()
					uni.showToast({
						title: '已关闭提醒',
						icon: 'none'
					})
					return
				}

				// 1. 计算提前时间（分钟转毫秒）
				const advanceMinutes = this.currentReminder.advanceTime.replace('分钟', '') * 60 * 1000

				// 2. 模拟“课程开始时间”（这里需要你替换为真实课程时间！！）
				//    示例：假设课程10分钟后开始（实际应从课程表取真实时间）
				const courseStartTime = Date.now() + 10 * 60 * 1000
				//    提醒时间 = 课程开始时间 - 提前时间
				const reminderTime = courseStartTime - advanceMinutes

				// 3. 定时提醒（前端模拟）
				this.currentReminder.timer = setTimeout(() => {
					uni.showModal({
						title: '课程提醒',
						content: this.currentReminder.content,
						showCancel: false
					})
				}, reminderTime - Date.now()) // 计算距离提醒的延迟

				// 4. 真实手机通知（需结合 uni-app 本地通知 API，可选）
				this.setNativeNotification(reminderTime)

				this.closeReminderModal()
				uni.showToast({
					title: '提醒设置成功',
					icon: 'success'
				})
			},

			// 自动填充默认提醒内容（示例：拼接课程名、老师、地点）
			getDefaultReminderContent() {
				// 替换为真实课程数据（this.course.title 等）
				return `课程提醒：${this.course.title || '未知课程'} 
老师：${this.course.teacher || '未知'} 
地点：${this.course.location || '未知'}`
			},

			// 【可选】设置手机本地通知（需真机运行，模拟器可能无效）
			setNativeNotification(reminderTime) {
				if (uni.addLocalNotification) {
					uni.addLocalNotification({
						id: Date.now(), // 唯一ID
						title: '课程提醒',
						content: this.currentReminder.content,
						trigger: {
							type: 'time',
							time: reminderTime // 提醒触发时间戳
						}
					})
				}
			}
		}
	};
</script>

<style scoped>
	/* 基础样式 */
	.container {
		padding: 16px;
		background-color: var(--bg-color);
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 80px;
		/* 为底部按钮留出空间 */
	}

	/* 导航栏样式 - 磨砂玻璃效果 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		background-color: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		font-weight: bold;
		border-radius: 0 0 16px 16px;
		position: sticky;
		top: 0;
		z-index: 10;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	}

	.nav-btn {
		color: var(--sub-text-color);
		font-size: 18px;
		padding: 8px;
	}

	.nav-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.save {
		color:var(--sub-text-color);
		font-weight: 500;
	}

	/* 卡片式设计 */
	.form-card,
	.time-card {
		background-color: #fff;
		border-radius: 16px;
		padding: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
		transition: all 0.3s ease;
	}

	.form-card:hover,
	.time-card:hover {
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
		transform: translateY(-2px);
	}

	/* 表单项目样式 */
	.form-item {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 12px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		transition: all 0.2s ease;
	}

	.form-item:active {
		background-color: rgba(0, 0, 0, 0.02);
	}

	.form-item:last-child {
		border-bottom: none;
	}

	/* 图标样式 */
	.form-icon,
	.time-icon {
		width: 22px;
		height: 22px;
		margin-right: 12px;
		opacity: 0.8;
	}


	/* 标签样式 */
	.label {
		width: 90px;
		color: #666;
		font-size: 15px;
		font-weight: 500;
	}

	/* 输入框样式 */
	.input {
		flex: 1;
		font-size: 15px;
		padding: 12px 8px;
		background-color: transparent;
		transition: all 0.3s ease;
		border-radius: 8px;
	}

	.input-focus {
		background-color: rgba(64, 158, 255, 0.05);
		padding-left: 12px;
	}

	.input::placeholder {
		color: #bbb;
	}

	/* 颜色选择器样式 */
	.color-preview {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 16px !important;
		border-radius: 12px !important;
		border-width: 1px !important;
		border-style: solid !important;
		transition: all 0.3s ease;
	}

	.color-dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		margin-left: 8px;
	}

	/* 时间段区域样式 */
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.add-btn {
		color: #ffffff;
		font-size: 14px;
		font-weight: 500;
		padding: 6px 12px;
		border-radius: 8px;
		background-color: var(--primary-color);
		transition: all 0.2s ease;
	}

	.add-btn:active {
		background-color: var(--primary-color-dark);
	}

	/* 时间段列表样式 */
	.time-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.time-item {
		padding: 16px;
		border-radius: 12px;
		background-color: #fff;
		border: 1px solid rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.time-item-active {
		background-color: rgba(64, 158, 255, 0.05);
		border-color: var(--border-color);
	}

	/* 时间行样式 */
	.time-row {
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		flex-wrap: nowrap;
		gap: 8px;
	}

	/* 选择器样式 */
	.picker {
		text-align: center;
		padding: 10px 12px;
		border-radius: 10px;
		background-color: #f9f9f9;
		flex: 1;
		min-width: 80px;
		font-size: 14px;
		color: #666;
		transition: all 0.3s ease;
		border: 1px solid #eee;
	}

	.picker-active {
		background-color: var(--bg-color);
		color: var(--text-color);
		border-color: var(--border-color);
	}

	.week-picker,
	.day-picker,
	.section-picker {
		flex: 0 0 auto;
		/* 取消弹性拉伸，按内容宽度显示 */
		min-width: auto;
		/* 移除最小宽度限制 */
	}

	.separator {
		padding: 0 4px;
		color: #999;
	}

	/* 删除按钮样式 */
	.delete-btn {
		color: #a34943;
		font-size: 22px;
		padding: 0 8px;
		width: 40px;
		text-align: center;
		transition: all 0.2s ease;
	}

	.delete-btn:active {
		transform: scale(1.2);
	}

	/* 预览区域样式 */
	.preview-row {
		margin-top: 12px;
		padding: 12px;
		border-radius: 8px;
		font-size: 14px;
		color: #666;
		text-align: center;
		transition: all 0.3s ease;
	}

	.preview-text {
		font-weight: 500;
	}

	/* 底部固定按钮 */
	.fixed-bottom {
		position: fixed;
		bottom: 20px;
		left: 16px;
		right: 16px;
		display: flex;
		justify-content: center;
	}

	.save-btn {
		background-color: var(--primary-color-dark);
		color: white;
		padding: 16px 0;
		border-radius: 12px;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
		box-shadow: 0 4px 16px var(--border-color);
		transition: all 0.2s ease;
		transform: scale(v-bind(btnScale));
		margin-top: 10px;
		/* 与上方设置提醒按钮拉开间距 */
		margin-bottom: 20px;
		/* 底部留一定空白 */
	}

	.save-btn:active {
		background-color: var(--primary-color-dark);
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.time-item {
		animation: fadeIn 0.3s ease forwards;
	}

	.time-item:nth-child(odd) {
		animation-delay: 0.05s;
	}

	.time-item:nth-child(even) {
		animation-delay: 0.1s;
	}

	.course-type-picker {
		padding: 10px 16px !important;
		border-radius: 12px !important;
		border-width: 1px !important;
		border-style: solid !important;
		transition: all 0.3s ease;
	}

	.required {
		background-color: rgba(103, 194, 58, 0.1);
		color: #a2b770;
		border-color: rgba(103, 194, 58, 0.3);
	}

	.elective {
		background-color: rgba(157, 122, 219, 0.1);
		color: #908db8;
		border-color: rgba(157, 122, 219, 0.3);
	}

	/* 新增的提醒按钮样式 */
	.reminder-btn {
		background-color: #c3cad8;
		color: white;
		padding: 16px 0;
		border-radius: 12px;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
		box-shadow: 0 4px 16px rgba(194, 200, 216, 1.0);
		transition: all 0.2s ease;
		transform: scale(v-bind(btnScale));
		margin-top: 20px;
		/* 与上方 time-card 拉开间距 */
	}

	.reminder-btn:active {
		background-color: #a1a7ba;
		transform: scale(0.95);
	}

	/* .reminder-icon {
	    width: 16px;
	    height: 16px;
	    margin-right: 6px;
	  }
	  */
	/* 提醒弹窗样式 */
	.reminder-modal {
		background-color: #fff;
		border-radius: 16px;
		width: 85vw;
		max-width: 400px;
		padding: 20px;
		box-sizing: border-box;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.modal-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.close-btn {
		font-size: 24px;
		color: #999;
		padding: 4px;
	}

	.form-label {
		display: block;
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
	}

	/* 调整父容器样式，确保有足够空间 */
	.form-group {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
		min-height: 60px;
		/* 确保有足够高度 */
	}

	.form-input {
		box-sizing: border-box;
		/* 保留box-sizing，但调整其他属性 */
		background-color: #f5f7fa;
		border-radius: 10px;
		padding: 12px 15px;
		font-size: 14px;
		width: 100%;
		border: 1px solid #eee;
		/* 新增：确保文字可见 */
		line-height: 1.5;
		/* 适当行高 */
		min-height: 40px;
		/* 最小高度 */
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		padding: 12px;
		border-radius: 10px;
		font-size: 14px;
		font-weight: 500;
		margin: 0 5px;
	}

	.cancel-btn {
		background-color: #f5f7fa;
		color: #666;
	}

	.confirm-btn {
		background-color: #90a3ba;
		color: white;
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.reminder-modal {
		background-color: #fff;
		border-radius: 16px;
		width: 85vw;
		max-width: 400px;
		padding: 20px;
		box-sizing: border-box;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.modal-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}
</style>